<template>
	<view class="wrap">
		<view class="cont">
			<view class="top">
				<van-search v-model="inp" shape="round" background=" #Fe9b23" placeholder="请输入搜索关键词"
					@click-left-icon="search" />
				<img :src="planbig">
			</view>
			<view class="classify">
				<view class="one" @click="to(v.producttypePath,v.producttypeName)" v-for="v in classifyIcon">
					<img :src="v.producttypeImg" alt="">
					<text>{{v.producttypeName}}</text>
				</view>
			</view>
			<van-image width="100vw" height="80" :src="plansmall" />
			<view class="" v-for="v in classifyIcon">
				<van-cell :title="v.producttypeName" is-link value="查看全部"
					@click="to(v.producttypePath,v.producttypeName)" />
				<view class="cont">
					<view v-for="x in (goodlist.filter((i,k)=>i.productCategory==v.producttypeName).filter((j,x)=>x<3))"
						class="item">
						<img :src="x.productImg" class="bigimg" @click="goodsinfo(x.productId)" />
						<view class="name">{{x.productName}}</view>
						<view class="price">
							<view>￥{{x.productPrice}}</view>
							<van-icon name="cart-circle" color="#f6b37c" size="40rpx" @click="addcart(x.productId,1)" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import $http from '../../request/index.js'
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		showSuccessToast,
		showFailToast
	} from 'vant'
	let inp = ref('')
	let goodlist = ref([])

	let plansmall = ref('') //小图
	let planbig = ref('') //大图
	let classifyIcon = ref([]) //分类小图片数组


	function to(path, classify) { //跳转到商品分类各个页面
		console.log(path, classify)
		uni.navigateTo({
			url: '/pages/goodlist/goodlist' + '?classify=' + classify
		})
	}

	function goodsinfo(id) { //跳转到商品详情
		uni.navigateTo({
			url: '/pages/goodsinfo/goodsinfo?id=' + id
		})
	}

	function addcart(id, num) { //添加购物车
		console.log(id, num)
		$http.post('/car/addCarProduct', {
			carProduct: id,
			carCount: num
		}).then(res => {
			console.log(res)
			let {
				msg,
				code
			} = res
			if (!code) {
				showSuccessToast(msg)
			} else {
				showFailToast(msg)
			}
		})
	}
	onShow(() => {
		$http.get('/plan').then(res => { //得到所有需要的图片
			console.log(res.data)
			plansmall.value = res.data.plansmall
			planbig.value = res.data.planbig
			classifyIcon.value = res.data.classifyicon
		})
		$http.get('/shopping/all').then(res => { //得到所有商品
			console.log(res.data)
			goodlist.value = res.data
		})
	})

	function search() { //点击搜索，返回搜索删选的所有商品
		$http.get(`/shopping/search?parameter=${ inp.value}`).then(res => {
			console.log(res)
			goodlist.value = res.data
		})
	}
</script>

<style scoped>
	.classify {
		margin: 60rpx 0 20rpx 0;
		width: 100vw;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		background-color: #ffffff;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.one {
		width: 150rpx;
		height: 120rpx;
		flex-wrap: wrap;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.one img {
		width: 80rpx;
		height: 80rpx;
	}

	.one text {
		width: 100%;
		text-align: center;
		font-size: 30rpx;
	}

	.van-cell {
		background-color: #f7f7f7;
	}

	.cont {
		display: flex;
		flex-wrap: wrap;
		width: 100vw;
		justify-content: space-evenly;
	}

	.item {
		width: 230rpx;
		background-color: #ffffff;
		padding: 20rpx;
		box-sizing: border-box;
		text-align: center;
		border-radius: 26rpx;
	}

	.bigimg {
		width: 200rpx;
		height: 200rpx;
	}

	.name {
		font-size: 26rpx;
		margin: 10rpx 0;
		color: gray;
	}

	.price {
		width: 100%;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #Fe9b23;
	}


	.van-grid-item text {
		margin-top: 20rpx;
		font-size: 30rpx;
	}

	/* 分类图片样式 */
	/* .van-image {
		width: 100rpx;
		height: 100rpx;
	} */

	.wrap {
		width: 100vw;
		height: calc(100vh - 44px);
		overflow-y: scroll;
		padding-bottom: 50px;
		background-color: #f7f7f7;
	}

	.top {
		width: 100vw;
		height: 320rpx;
		background-color: #Fe9b23;
		border-radius: 80rpx;
		text-align: center;
	}

	.top img {
		width: 85%;
		height: 250rpx;
		border-radius: 40rpx;
	}
</style>